<template>
	<view class="container">
		<uni-nav-bar class="nav" height="88rpx" leftWidth="0rpx" rightWidth="0rpx" :backgroundColor="navBgColor" :border="navBorder" :fixed="true">
			<view class="search-view flex-r ac">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit" @tap="$goBack(1)"></image>
				<view class="search flex-r ac" :class="{'active': isBlack}">
					<image class="search-icon" src="@/public/images/public/sy_ss.png" mode="aspectFit"></image>
					<input class="search-input text-secondary" v-model="searchValue" type="text" confirm-type="search" :maxlength="10" @confirm="submitSearch" placeholder="请输入您要搜索的专家名称" :auto-focus="true" :focus="true" />
					<button class="search-btn text-secondary color-white" @tap="submitSearch">搜索</button>
				</view>
			</view>
		</uni-nav-bar>
		<view class="body flex-c">
			<view class="search-head flex-r ac">
				<text class="text-primary text-bold">{{isSearch ? '搜索结果' : '搜索记录'}}</text>
				<template v-if="!isSearch && history[0]">
					<image src="@/public/images/public/qkssjl.png" mode="aspectFit"></image>
					<text class="text-secondary color-grey" @tap="clearHistory">清空搜索记录</text> 
				</template>
			</view>
			<view class="result-body bottom-ios" v-if="isSearch" :class="{'empty': !expertLists[0]}">
				<EmptyContent v-if="!expertLists[0]" top="160rpx" text="搜索结果为空" img="qsy_zwxl" @refresh="submitSearch"></EmptyContent>
				<ExpertList v-else :list="expertLists"></ExpertList>
				<view class="list-end flex-r pt20 mb20" v-if="isEnd && expertLists[0]">
					<text>已经到底啦～</text>
				</view>
			</view>
			<view class="history" v-else>
				<view class="history-body flex-r"  v-if="!isSearch && history[0]">
					<view class="history-item" v-for="(item, index) in history" :key="index" @tap="goSearch(item)">
						<text class="color-grey">{{item}}</text>
					</view>
				</view>
				<view class="empty-result" v-else>
					<text class="text-secondary color-grey">暂无搜索记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				history: [],
				expertLists: [],
				isSearch: false,
				pageNo: 1,
				isEnd: false,
				
				isBlack: false,
				navBgColor: 'rgba(255,255,255,0)',
				navBorder: false
			}
		},
		components: {
			ExpertList: () => import('./components/ch-expert/ch-expertlist')
		},
		computed: {
			user() {
				return this.$store.state.user
			},
		},
		watch: {
			searchValue(newValue, oldValue) {
				if(oldValue && !newValue){
					this.isSearch = false
				}
			}
		},
		onLoad() {
			this.getHistory();
		},
		onReachBottom() {
			if(!this.isEnd){
				this.searchExperts()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(this.timer){
				return false
			}
			this.timer = setTimeout(()=>{
				this.setNavBgColor()
				this.timer = null
			}, 50);
		},
		methods: {
			//提交搜索
			submitSearch() {
				if (this.searchValue.trim() == '' ) {
					uni.showToast({
						title: '关键词不能为空',
						icon: 'none'
					})
					return
				}
				this.expertLists = []
				this.isSearch = true
				this.isFocus = false
				this.pageNo = 1
				this.searchExperts();
				this.saveHistory();
			},
			//历史记录点击搜索
			goSearch(key){
				this.searchValue = key;
				this.submitSearch()
			},
			//搜索专家
			searchExperts() {
				this.$http.get({
					url: '/api/appUser/queryExpertInfoList',
					data: {
						searchValue: this.searchValue,
						pageNo: this.pageNo,
						pageSize: 10,
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result.total){
						if(this.pageNo == 1){
							this.expertLists = data.result.records
						}else{
							this.expertLists.push(...data.result.records)
						}
						this.isEnd = this.pageNo >= data.result.pages
						this.pageNo += 1
					}else{
						uni.showToast({
							title: '暂无相关专家',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//获取历史记录
			getHistory(){
				let value = uni.getStorageSync('historyExpert');
				if(value){
					this.history = JSON.parse(value);
				}
			},
			//保存历史记录
			saveHistory(){
				let historyWords = [];
				let value = uni.getStorageSync('historyExpert');
				if(value){
					value = JSON.parse(value);
					historyWords = value.filter(item => item != this.searchValue); //过滤重复数据
				}
				historyWords.unshift(this.searchValue); //添加到第一个位置
				historyWords.splice(15); //保留15个
				uni.setStorageSync('historyExpert', JSON.stringify(historyWords));//存储列表
				this.history = historyWords;
			},
			//删除历史记录
			clearHistory(){
				this.history = [];
				uni.removeStorageSync('historyExpert');
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				if(scrollTop > 10){
					this.navBorder = true
				}else{
					this.navBorder = false
				}
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		min-height: 100vh;
		.search-view{
			padding: 0 20rpx;
			width: 100%;
			box-sizing: border-box;
			.left{
				width: 48rpx;
				height: 48rpx;
			}
			.search {
				flex: 2;
				height: 72rpx;
				background: #ffffff;
				border-radius: 36rpx;
				&.active{
					background: #F2F5FA;
				}
				.search-icon{
					margin-left: 20rpx;
					width: 32rpx;
					height: 32rpx;
				}
				.search-input {
					flex: 2;
					margin-left: 10rpx;
					height: 72rpx;
					/deep/ .uni-input-placeholder{
						color: #B3B3B3;
					}
				}
				.search-btn{
					margin: 0 6rpx 0 20rpx;
					padding: 0;
					width: 120rpx;
					height: 60rpx;
					background: #0055FF;
					border-radius: 30rpx;
					box-sizing: border-box;
					line-height: 60rpx;
				}
			}
		}
		.body{
			.search-head{
				height: 80rpx;
				padding: 0 20rpx;
				.text-primary{
					flex: 2;
				}
				image{
					margin-right: 10rpx;
					height: 32rpx;
					width: 32rpx;
				}
			}
			.history{
				min-height: calc(var(--safe-height) - #{$navbar-height} - 80rpx);
				background: #FFFFFF;
				.history-body{
					padding: 20rpx 20rpx 0;
					flex-wrap: wrap;
					justify-content: flex-start;
					.history-item{
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 30rpx;
						background: #F2F5FA;
						margin: 0 20rpx 20rpx 0;
						text{
							padding: 0 30rpx;
							font-size: 26rpx;
							line-height: 60rpx;
						}
					}
				}
			}
			.result-body{
				&.empty{
					background-color: #FFFFFF;
					min-height: calc(var(--safe-height) - #{$navbar-height} - 80rpx);
				}
			}
			.empty-result{
				padding: 20rpx;
			}
		}
	}
</style>
